import useLoadQuestionData from "../../../hooks/useLoadQuestionData";
import {Button, Result, Spin} from "antd";
import useGetPageInfo from "../../../hooks/useGetPageInfo";
import {useNavigate} from "react-router-dom";
import {useTitle} from "ahooks"
import styles from './index.module.scss'
import {StatHeader} from "./StatHeader";
import ComponentList from "./ComponentList";
import {useState} from "react";
import {PageStat} from "./PageStat";
import {ChartStat} from "./ChartStat";

export function Stat() {
    const {loading} = useLoadQuestionData()
    const {title, isPublished} = useGetPageInfo()

    const [selectedComponentId, setSelectedComponentId] = useState('')
    const [selectedComponentType, setSelectedComponentType] = useState('')

    useTitle(`问卷统计 - ${title}`)
    const nav = useNavigate()

    const LoadingElem = (
        <div style={{textAlign: 'center', marginTop: '60px'}}>
            <Spin/>
        </div>
    )

    function genContentElem() {
        if (typeof isPublished === 'boolean' && !isPublished) {
            return <div style={{flex: '1'}}>
                <Result status={'warning'} title={"该问卷尚未发布"} subTitle={'该问卷尚未发布'}
                        extra={<Button onClick={() => {
                            nav(-1)
                        }} type={'primary'}>返回</Button>}></Result>
            </div>
        }
        return (<>
            <div className={styles.left}>
                <ComponentList selectedComponentId={selectedComponentId} setSelectedComponentId={setSelectedComponentId}
                               setSelectedComponentType={setSelectedComponentType}></ComponentList>
            </div>
            <div className={styles.main}>
                <PageStat selectedComponentId={selectedComponentId} setSelectedComponentId={setSelectedComponentId}
                          setSelectedComponentType={setSelectedComponentType}></PageStat>
            </div>
            <div className={styles.right}>
                <ChartStat selectedComponentId={selectedComponentId}
                           selectedComponentType={selectedComponentType}></ChartStat>
            </div>
        </>)
    }


    return (
        <div className={styles.container}>
            <StatHeader></StatHeader>
            <div className={styles['content-wrapper']}>
                {loading && LoadingElem}
                {!loading && <div className={styles.content}>
                    {genContentElem()}
                </div>}
            </div>
        </div>
    )
}